<template>
   <div class="offlineStores">
      <div class="swper">
         <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
               <img :src="image" />
            </van-swipe-item>
         </van-swipe>
      </div>
      <h3>首当其冲</h3>
      <van-grid :border="false" :column-num="2">
         <van-grid-item @click="$router.push('../../Free')">
            <van-image
               src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F3/u724.svg" />
         </van-grid-item>
         <van-grid-item @click="$router.push('../../Free')">
            <span>小米还科技</span>
            <span>科技决定未来</span>
            <img
               src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p36.png">
            <span>小米还科技</span>
            <span>科技决定未来</span>
            <img
               src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E6%90%9C%E7%B4%A2%E7%AD%9B%E9%80%89/p66.png">
         </van-grid-item>
      </van-grid>
      <h3>来一个</h3>
      <van-grid :border="false" :column-num="3" class="rouroude">
         <van-grid-item @click="$router.push('../../Free')">
            <div>
               <span class="spans">肉的一批</span><br>
               <span class="spansp">纵享丝滑</span><br>
               <van-button round type="primary" size="mini" color="red">点击查看</van-button>
               <van-image width="80" height="80"
                  src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p24.png" />
               <span>￥1988.00</span>
            </div>
         </van-grid-item>
         <van-grid-item @click="$router.push('../../Free')">
            <div>
               <span class="spans">肉的一批</span><br>
               <span class="spansp">纵享丝滑</span><br>
               <van-button round type="primary" size="mini" color="red">点击查看</van-button>
               <van-image width="80" height="80"
                  src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F3/p127.png" />
               <span>￥198.00</span>
            </div>
         </van-grid-item>
         <van-grid-item @click="$router.push('../../Free')">
            <div>
               <span class="spans">肉的一批</span><br>
               <span class="spansp">纵享丝滑</span><br>
               <van-button round type="primary" size="mini" color="red">点击查看</van-button>
               <van-image width="80" height="80"
                  src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p36.png" />
               <span>￥8848.00</span>
            </div>
         </van-grid-item>
      </van-grid>
      <van-cell v-for="item in itemsb" :key="item.id" @click="$router.push({path:'/goods_detail',query:{id:item.id}})">
         <template #title>
            <van-card :num="item.saleNum" tag="99+" :price="item.price" desc="小米官方授权传记" :title="item.title"
               :thumb="item.image"
               :origin-price="item.originPrice" />
         </template>
      </van-cell>
      <van-empty image-size="100" description="没有更多了哦" />
   </div>
</template>

<script setup>
import { ref } from 'vue';
import { getHomeData } from '../../../api/home'

const dizhi = 'https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F1/'
const images = ref([
   dizhi+'u616.jpg',
   dizhi+'u617.jpg',
   dizhi+'u618.jpg',
   dizhi+'u619.jpg',
   dizhi+'u618.jpg',
])
const itemsb = ref([])
async function foo(){
    const result=await getHomeData()
    const{items}=result
    itemsb.value.push(...items.list)
}
foo()

</script>

<style lang="less" scoped>
.offlineStores {
   margin-top: 50px;
}

img {
   width: 30%;
}

.swper img {
   width: 100%;
}

.rouroude span {
   color: aliceblue;
}

.spans {
   font-size: 18px;
}

.spansp {
   font-size: 12px;
}
.offlineStores .van-grid-item{
   background-color: #ccc;
}
.rouroude .van-grid-item__content div {
   text-align: center;
   border-radius: 10px;
   background-color: rgba(175, 223, 235, 1);
}
</style>
